<template>
	<view>
		<u-navbar :background="{background: '#fff'}" back-icon-color="#222222" title-color="#222222" title="预约信息详情"></u-navbar>
		<view class="" style="margin: 22rpx 28rpx;border-radius: 20rpx;background: #fff;padding: 40rpx 0 39rpx 0;">
			  <view class="" style="display: flex;align-items: center;justify-content: center;">
			  	 <!-- <image src="" mode="" style="width: 34rpx;height: 34rpx;"></image> -->
				 <image :src="list.order_status==3? '../../static/xx.png' : '../../static/index/gg.png'" mode="" style="width: 34rpx;height: 34rpx;"></image>
					 <view class="" style="font-size: 28rpx;padding-left: 10rpx;">
						 <!-- {{list.order_status==3 ? '已退号' : '加号成功'}} -->
						 {{list.pay_status==1&&list.order_status==1 ? '待就诊' : list.pay_status==1&&list.order_status==2 ? '已完成' : list.pay_status==0&&list.order_status==1 ? '待支付' :'已退号'}}
					 	
					 </view>
			  </view>
				<view class="" style="font-size: 26rpx;color: #666666;text-align: center;padding-top: 30rpx;">
					就诊地址：{{list.clinic_address}}
				</view>
		</view>
		
		<view class="" style="margin: 22rpx 28rpx;border-radius: 20rpx;background: #fff;padding-bottom: 54rpx;">
			  <view class="" style="display: flex;align-items: center;justify-content: space-between;padding: 36rpx;">
			  	 <view class="" style="font-size: 30rpx;">
			  	 	 加号信息
			  	 </view>
					 
			  </view>
				<view class="" style="font-size: 28rpx;display: flex;align-items: center;padding: 0 36rpx;">
					 <view class="" style="color: #666666;">
					 	 就诊时间
					 </view>
					 <view class="" style="padding-left: 57rpx;">
					 	{{list.date_text}}
					 </view>
				</view>
				<view class="" style="font-size: 28rpx;display: flex;align-items: center;padding: 36rpx;">
					 <view class="" style="color: #666666;">
					 	 就诊医生
					 </view>
					 <view class="" style="padding-left: 57rpx;">
					 	{{list.doctor_info}}
					 </view>
				</view>
				<view class="" style="font-size: 28rpx;display: flex;align-items: center;padding: 0 36rpx;">
					 <view class="" style="color: #666666;">
					 	 门诊类型
					 </view>
					 <view class="" style="padding-left: 57rpx;">
					 	普通号
					 </view>
				</view><view class="" style="font-size: 28rpx;display: flex;align-items: center;padding: 36rpx;">
					 <view class="" style="color: #666666;">
					 	 就诊人
					 </view>
					 <view class="" style="padding-left: 84rpx;">
					 	{{list.patient_name}} {{list.patient_mobile}}
					 </view>
				</view>
				<view class="" style="font-size: 28rpx;display: flex;align-items: center;padding: 0 36rpx;">
					 <view class="" style="color: #666666;">
					 	 就诊机构
					 </view>
					 <view class="" style="padding-left: 57rpx;">
					 	{{list.clinic_name}}
					 </view>
				</view>
				<view class="" style="font-size: 28rpx;display: flex;align-items: center;padding: 36rpx;">
					 <view class="" style="color: #666666;">
					 	 订单号
					 </view>
					 <view class="" style="padding-left: 84rpx;">
					 	{{list.order_no}}
					 </view>
				</view>
				<view class="" style="font-size: 28rpx;display: flex;align-items: center;padding: 0 36rpx;" v-if="list.pay_status==0&&list.order_status==1 || list.pay_status==1&&list.order_status==1"> 
					 <view class="" style="color: #666666;">
					 	 操作
					 </view>
					 <view class="" style="font-size: 26rpx;color: #1A9EFF;padding-left: 112rpx;" @tap="show=true">
					 	 点击退号
					 </view>
				</view>
				
		</view>
		<!-- 温馨提示 -->
		<view class="" style="font-size: 26rpx;color: #666666;padding-left: 63rpx;">
			温馨提示
		</view>
		<view class="" style="font-size: 26rpx;color: #666666;padding: 22rpx 63rpx;">
			*号源由医生本人提供、与医生无关。到医院需按医院门
			诊价格缴纳医事服务费
		</view>
		<u-modal v-model="show" :content="content" :show-cancel-button="true" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 show:false,
				 content:'退号后将无法使用线上挂号单换取就诊凭证，请确认是否继续退号',
				 id:null,
				 list:{}
			};
		},
		//方法
		methods: {
			detail(){
				this.api({
					url:'/api/register/getOrderDetail',
					method:'post',
					data:{
						order_id:this.id
					}
				}).then(res=>{
					this.list=res.data
				})
			},
			confirm(){
				this.api({
					url:'/api//register/orderStatus',
					method:'post',
					data:{
						order_id:this.id
					}
				}).then(res=>{
				
					this.detail()
				})
			}
		},
		//首页渲染
		onLoad(options) {
			this.id=options.id
			this.detail()
		},

	}
</script>

<style lang="scss" scoped>
	page{
		background: #F8F8F8;
	}
	.btn{
		
		height: 80rpx;
		background: linear-gradient(180deg, #1A9EFF, #0FB8FF);
		border-radius: 40rpx;
		margin:60rpx 115rpx;
		text-align: center;
		color: #fff;
		line-height: 80rpx;
	}
  
</style>
